<template>
  <div class="maintain">
    <my-head title="维护管理" :isRightClick = "true"/>
    <mu-paper :z-depth="1" class="loadmore-wrap" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <mu-container ref="container" class="loadmore-content">
        <mu-load-more :refreshing="refreshing" @refresh="refresh">
          <mu-container>
            <mu-paper :z-depth="1">
              <mu-data-table stripe :loading="tableLoading" :columns="columns" :sort.sync="sort" @sort-change="handleSortChange" :data="list" @row-click="rowTap">
                <template slot-scope="scope">
                  <td>{{scope.row.code}}</td>
                  <td>{{scope.row.quantity}}</td>
                  <td>{{scope.row.maintainNumber}}</td>
                  <td>{{scope.row.statue}}</td>
                </template>
              </mu-data-table>
            </mu-paper>
          </mu-container>
        </mu-load-more>
      </mu-container>
    </mu-paper>
  </div>
</template>

<script>
import myHead from '@/components/header'
import api from "@/common/api"
export default {
  name: 'maintain',
  components: {
    myHead
  },
  data () {
    return {
      refreshing: false,
      wrapperHeight: 0,
      tableLoading: true,
      sort: {
        name: '',
        order: 'asc'
      },
      columns: [
          { title: '任务单号',  name: 'code' , width: 100},
          { title: '总数', name: 'quantity', align: '', width: 50},
          { title: '已维护数', name: 'maintainNumber',  align: ''},
          { title: '状态', name: 'status',  align: '', width: 80}
      ],
      list: []
    }
  },
  methods: {
    rowTap (index, row, event) {
        this.$router.push({name:'maintainlist',params:{code:row.code}})
    },
    handleSortChange ({name, order}) {
      this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
    },
    refresh () {
      // 下拉刷新
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      //this.resData(0);
    },
    oneResdata (data) {
      this.common.reqData(api.app('maintain'), data, res=>{
        let datas = res.data;
        console.log("维护管理",datas);
        if(datas.status == 100){
            for(let item of datas.content.bills){
                this.list.push({
                    code: item.code,
                    quantity: item.totalQty,
                    maintainNumber:item.passQty,
                    statue:item.status
                });
            }
        }else{
          this.Toast.fail({
              duration: 3000,
              mask: true,
              message: datas.msg
          });
        }
        this.tableLoading = false;
      },err =>{
          console.log(err)
          this.Toast.clear();
      });
    }
  },
  mounted () {
    this.wrapperHeight = document.documentElement.clientHeight - 45
    this.oneResdata(this.$store.state.user);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.loadmore-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.loadmore-wrap .mu-appbar {
    width: 100%;
}
.loadmore-content {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.mu-paper.mu-paper-round.mu-elevation-1{
  -webkit-box-shadow: none;
  box-shadow: none;
}
.loadmore-content.container,.container{
    padding: 0;
}
</style>
